<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">添加废弃物</small>
      </a>
      <a href="javascript:;" class="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
    </header>
    <main>
  
      <div class="formcontent">
        <ul>
          <li>
            <span>处置日期</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="formName.dataValue" @click="OutTimeopenPickerdDate()" name="dataValue" v-validate="'required'" :class="{'is-danger': errors.has('dataValue')}">
              </el-input>
              <mt-datetime-picker ref="OutTimepicker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="OutTimepickerValue" @cancel="OutTimehandleCanceDate" @confirm="OutTimehandleConfirmDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>处置时间</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="time" :disabled="true" v-model="formName.startdataValue" @click="openPickerStart()">
              </el-input>
              <mt-datetime-picker v-model="startvalue1" ref="picker1" type="time" @cancel="handleCancelStart" @confirm="handleConfirmStart"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>种类</span>
            <div class="froms">
              <input type="text" v-model="formName.kind">
            </div>
          </li>
          <li>
            <span>数量</span>
            <div class="froms">
              <input type="text" v-model="formName.num">
            </div>
          </li>
          <li>
            <span>登记日期</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="formName.AbandonDate" @click="AbandonDateopenPickerdDate()">
              </el-input>
              <mt-datetime-picker ref="AbandonDatepicker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="AbandonDatepickerValue" @cancel="AbandonDatehandleCanceDate" @confirm="AbandonDatehandleConfirmDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>登记时间</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="time" :disabled="true" v-model="formName.enddataValue" @click="openPickerEnd()">
              </el-input>
              <mt-datetime-picker v-model="startvalue2" :startHour="startHour2" :endHour="endHour2" ref="picker2" type="time" @cancel="handleCancelEnd" @confirm="handleConfirmEnd"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>  <em>*</em>处置人</span>
            <div class="froms">
              <input type="button" class="text_l" name="msg" v-model="msg" v-validate="'required'" :class="{'is-danger': errors.has('msg')}" @click="handleClick">
              <mt-popup v-model="popupVisible" position="right" modal=false class="mint-popup-3">
                <!--选择人员组件-->
                <app-person v-on:listenToChildEvent="peopleClick" v-on:listencloseclick="clickmodl"></app-person>
              </mt-popup>
  
            </div>
          </li>
          <li>
            <span>去向</span>
            <div class="froms">
              <input type="text" v-model="formName.whereabouts">
            </div>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
  import Person from '@/components/institutionPerson'
  import {
    AbandonStandingAdd,
    InstitutionPerson
  } from '../../api/api';
  import {
    DatetimePicker,
    Popup
  } from 'mint-ui';
  var moment = require('moment');
  export default {
    name: 'add_mrcj',
    components: {
      'mt-popup': Popup,
      'mt-datetime-picker': DatetimePicker,
      'app-person': Person
    },
    data() {
      return {
        msg: '',
        getNowFormatDate: null,
        CriteriaList: [],
        //时间
        AbandonDatepickerValue: moment().format('YYYY-MM-DD'),
        OutTimepickerValue: moment().format('YYYY-MM-DD'),
        formName: {
          dataValue: '',
          AbandonDate: '',
          startdataValue: '',
          enddataValue: '',
          kind: '',
          num: '',
          whereabouts: ''
        },
        value: '',
        //组件
        seachtext: '',
        popupVisible: false,
        closeOnClickModal: false,
        getPerson: [],
        Enterprise: {},
        PageSize: 10,
        institutionPersonname: '',
        institutionPersonunid: '',
      };
    },
    computed: {
      errors() {
        return this.$verify.$errors
      }
    },
    methods: {
      //获取处置日期
      OutTimeopenPickerdDate() {
        this.$refs.OutTimepicker.open();
      },
      OutTimehandleCanceDate() {
        let _this = this
        _this.OutTimepickerValue = _this.formName.dataValue
      },
      OutTimehandleConfirmDate(val) {
        let _this = this
        _this.formName.dataValue = moment(val).format('YYYY-MM-DD')
      },
      //获取登记日期
      AbandonDateopenPickerdDate() {
        this.$refs.AbandonDatepicker.open();
      },
      AbandonDatehandleCanceDate() {
        let _this = this
        _this.AbandonDatepickerValue = _this.formName.AbandonDate
      },
      AbandonDatehandleConfirmDate(val) {
        let _this = this
        _this.formName.AbandonDate = moment(val).format('YYYY-MM-DD')
      },
      //获取开始时间&&结束时间
      openPickerStart() {
        let _this = this
        if (_this.startvalue2) {
          let a = _this.startvalue2.split(':')
          _this.endHour1 = a[0] - 0
        }
        _this.$refs.picker1.open()
        setTimeout(() => {
          let vmodal = document.getElementsByClassName('v-modal')[0]
          vmodal.onclick = function() {
            _this.handleCancelStart()
          }
        }, 10)
      },
      openPickerEnd() {
        let _this = this
        if (_this.startvalue1) {
          let a = _this.startvalue1.split(':')
          _this.startHour2 = a[0] - 0
        }
        _this.$refs.picker2.open()
        setTimeout(() => {
          let vmodal = document.getElementsByClassName('v-modal')[0]
          vmodal.onclick = function() {
            _this.handleCancelEnd()
          }
        }, 10)
      },
      // 取消按钮 --- 把选择器绑定的velue恢复为输入框的dataValue
      handleCancelStart() {
        let _this = this
        _this.startvalue1 = _this.formName.startdataValue
      },
      handleCancelEnd() {
        let _this = this
        _this.startvalue2 = _this.formName.enddataValue
      },
      // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
      handleConfirmStart(val) {
        let _this = this
        _this.formName.startdataValue = val
      },
      handleConfirmEnd(val) {
        let _this = this
        _this.formName.enddataValue = val
      },
  
      //处置人弹窗
      handleClick: function() {
        this.popupVisible = true
        this.getInstitutionPerson();
      },
      clickmodl: function() {
        this.popupVisible = false
      },
      //获取item
      peopleClick: function(data) {
        this.institutionPersonname = data.name;
        this.institutionPersonunid = data.unid;
        this.clickmodl();
        this.msg = this.institutionPersonname
      },
      //提交方法
      submitForm: function() {
        this.$validator.validateAll().then((result) => {
          if (result) {
            let a = this.formName.startdataValue.split(":")
            let b = this.formName.enddataValue.split(":")
            let varQueryData = {
              //Name: this.institutionPersonname,
              Unid: this.institutionPersonunid,
            }
            let varEnterpriseUnid = {
              Unid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
              Name: JSON.parse(localStorage.getItem('auth')).enterpriseName,
            }
            let data = {
              OutTime: moment(this.formName.dataValue).format('YYYY-MM-DD 00:00:00'),
              StartHour: a[0],
              StartMin: a[1],
              Kind: this.formName.kind,
              Num: this.formName.num,
              AbandonDate: moment(this.formName.abandonDate).format('YYYY-MM-DD 00:00:00'),
              EndHour: b[0],
              EndMin: b[1],
              Whereabouts: this.formName.whereabouts,
              EnterprisePerson: varQueryData,
              Enterprise: varEnterpriseUnid,
            }
            let dataoption = {
              params: {
                Data: JSON.stringify(data),
                UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
              }
            }
            //调取接口
            AbandonStandingAdd(dataoption).then((res) => {
              if (res.success === true) {
                this.$message.success('保存成功');
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
            }).catch(function() {
              this.$message.error('网络异常。');
            })
  
          }else{
              this.$message.error('带*号为必填项，请确认填写格式正确');
          }
        })
  
  
      },
    }
  }
</script>

<style lang="scss">
  
</style>
